<template>
  <div class="overview-content">
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="24" style="margin-bottom:20px;">
        <div class="chart-wrapper">
          <div class="countFsColor addBtnA" @click="showDiog">添加</div>
          <el-table
            :data="tableData"
            style="width: 100%"
        
            class="card-table"
            :border="false"
            stripe
          >
            <template>
              <slot :row="tableData" />
            </template>
          </el-table>
        </div>
      </el-col>
    </el-row>
    <myModal :obj="obj" :disabled="disabled" @close="close" @save="save">
      <div class="mpdalBody">
        <el-form ref="form" label-width="85px" class="formDiv">
          <el-form-item label="" :required="true">
            <DragImage v-if="obj.show" maxcount="1" format="png,pdf,jpg,jpeg,mp4" :houseid="houseid" @getImage="changePoster" />
          </el-form-item>
          <!-- <el-form-item >
            <span>支持上传：<em style="color: #aaaaaa">PDF、视频(mp4)、图片(jpg / png / jpeg)</em></span>
          </el-form-item> -->
          <el-form-item label="" :required="true">
            <el-radio-group v-model="fileType">
              <el-radio :label="0" value="0">普通文件</el-radio>
              <el-radio :label="1" value="1">出租授权书</el-radio>
              <el-radio :label="2" value="2">出售授权书</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
    </myModal>
  </div>
</template>

<script>
import myModal from '@/components/Modal'
import DragImage from '@/components/Upload/DragImage'
import { addFile, getHouseFileListByHouseId } from '@/api/houseFile'
import { mapState } from 'vuex'
export default {
  components: { myModal, DragImage },
  props: {
    houseid: {
      type: String
    }
  },
  computed: mapState({ msg: state => state.msg }),
  data() {
    return {
      disabled: true,
      fileUrl: undefined,
      tableData: [],
      obj: {
        show: false,
        title: '上传文件',
        width: '647px'
      },
      fileType: 0
    }
  },
  watch: {
    fileUrl(val) {
      if (val == '') {
        this.disabled = true
      } else {
        this.disabled = false
      }
    }
  },
  created() {
    console.log('houseid2：', this.houseid)
    this.queryFileList()
  },
  methods: {
    showDiog() {
      this.obj.show = true
    },
    changePoster(val) {
      console.log('val.toString():', val.toString())
      this.fileUrl = val.toString()
    },
    save() {
      const that = this
      var data = { 'houseId': this.houseid, 'fileUrl': this.fileUrl, 'fileType': this.fileType }
      addFile(data).then(response => {
        console.log(response)
        if (response.code === 200) {
          that.close()
          that.fileUrl = ''
          that.queryFileList()
          this.obj.show = false
        }
      })
    },
    close() {
      this.obj.show = false
      this.fileUrl = ''
    },
    queryFileList() {
      getHouseFileListByHouseId(this.houseid).then(response => {
        this.tableData = response.data
        this.$store.commit('user/changeMsg', this.tableData)
      })
    },
    handleFileView(par) {
      console.log(par, 3333)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-table th.is-leaf, ::v-deep .el-table td,::v-deep .el-table__body{border: 0;}
::v-deep .el-table::before ,::v-deep .el-table__fixed-right::before{display: none;}
::v-deep  th{background: #cacaca;font-weight: bold;color: #575757;}
::v-deep   .el-table--striped .el-table__body tr.el-table__row--striped td{background: #f7f7f7;}
::v-deep   .addBtnA{text-align: right;margin-bottom: 10px;cursor: pointer;}
::v-deep  .el-upload ul{width: 360px;}
 ::v-deep .el-upload-list__item-thumbnail{width: 100%;padding-right: 10px;max-width:148px; max-height:148px;}
::v-deep .el-upload.el-upload--picture-card{width: 100%;}
::v-deep .w100{width: 100%;height: 100%;}
</style>
